<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
	<title>bootstap练习1</title>
	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/b3-demo1-index.css">
	<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
</head>
<body>
<!-- 这是导航部分 -->
<nav class="navbar navbar-default mynavbar navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" id="btn-shousuo">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">麦子学院</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right" id="ulnav">
        <li><a href="#shouye">首页</a></li>
        <li><a href="#bbs">论坛</a></li>
        <li><a href="#html5">前端开发</a></li>
        <li><a href="#newclass">最新课程</a></li>
        <li><a href="#yidongapp">移动APP</a></li>
        <li><a href="#lianxiwomen">联系我们</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!-- 这是导航部分 -->

<!-- 面板部分 -->
<section class="mianbanpart text-center" id="shouye">
	<div class="container wow fadeInUp animated" data-wow-delay="1s">
		<div class="mianban-tt">
			<h2>bootstrap实战课程等你来战！</h2>
			<p>本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员</p>
			<p>培训技能的目标：使用bootstrap框架快速构建响应式网页，颠覆传统WEB前端！</p>
		</div>
		<div class="mianban-bd">
			<img src="img/php.jpg" class="img-responsive center-block">
		</div>
	</div>
</section>
<!-- 面板部分 -->

<!-- 主要内容部分 -->
<section class="mainpart">
	<div class="part-one" id="bbs">
		<div class="container text-center">
		<div class="row wow fadeInUp animated">
			<div class="col-md-4">
				<img src="img/a.png">
				<h3>Android开发</h3>
				<p>Android开发技术交流、问题求助、实战案例分享</p>
			</div>
			<div class="col-md-4">
				<img src="img/a.png">
				<h3>Android开发</h3>
				<p>Android开发技术交流、问题求助、实战案例分享</p>
			</div>
			<div class="col-md-4">
				<img src="img/a.png">
				<h3>Android开发</h3>
				<p>Android开发技术交流、问题求助、实战案例分享</p>
			</div>
		</div>
		</div>
	</div>
	<div class="part-two" id="html5">
		<div class="container">
		<div class="row">
			<div class="col-md-6 img-mess wow fadeInLeft animated">
				<h3>HTML5前端开发</h3>
				<p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
				<div class="mdpart">
					<span class="glyphicon glyphicon-grain"></span>
					<span>使用HTML5与CSS3技术轻松实现设备自适应展示。</span>
				</div>
				<div class="mdpart">
					<span class="glyphicon glyphicon-grain"></span>
					<span>使用HTML5与CSS3技术轻松实现设备自适应展示。</span>
				</div>
			</div>
			<div class="col-md-6 img-bd wow fadeInRight animated">
				<a href="#">
					<img src="img/html5.jpg" class="img-responsive">
				</a>
			</div>
		</div>
		</div>
	</div>
	<div class="part-two" style="background-color: #fff;">
		<div class="container">
		<div class="row wow fadeInUp animated">
			<div class="col-md-6 img-bd">
				<a href="#">
					<img src="img/Bootstrap.jpg" class="img-responsive">
				</a>
			</div>
			<div class="col-md-6 img-mess">
				<h3>HTML5前端开发</h3>
				<p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
				<div class="mdpart">
					<span class="glyphicon glyphicon-grain"></span>
					<span>使用HTML5与CSS3技术轻松实现设备自适应展示。</span>
				</div>
				<div class="mdpart">
					<span class="glyphicon glyphicon-grain"></span>
					<span>使用HTML5与CSS3技术轻松实现设备自适应展示。</span>
				</div>
			</div>
		</div>
		</div>
	</div>
	<div class="part-three" id="newclass">
		<div class="container wow fadeIn animated" data-wow-delay="1s">
			<h2 class="text-center">最新课程</h2>
			<div class="part-three-bd">
			<div class="row">
				<div class="col-md-3">
					<div class="course">
						<img src="img/swift.jpg" class="img-responsive">
						<a href="#" class="">加入学习</a>
					</div>
				</div>
				<div class="col-md-3">
					<div class="course">
						<img src="img/swift.jpg" class="img-responsive">
						<a href="#" class="">加入学习</a>
					</div>
				</div>
				<div class="col-md-3">
					<div class="course">
						<img src="img/swift.jpg" class="img-responsive">
						<a href="#" class="">加入学习</a>
					</div>
				</div>
				<div class="col-md-3">
					<div class="course">
						<img src="img/swift.jpg" class="img-responsive">
						<a href="#" class="">加入学习</a>
					</div>
				</div>
				<div class="col-md-3">
					<div class="course">
						<img src="img/swift.jpg" class="img-responsive">
						<a href="#" class="">加入学习</a>
					</div>
				</div>
				<div class="col-md-3">
					<div class="course">
						<img src="img/swift.jpg" class="img-responsive">
						<a href="#" class="">加入学习</a>
					</div>
				</div>
				<div class="col-md-3">
					<div class="course">
						<img src="img/swift.jpg" class="img-responsive">
						<a href="#" class="">加入学习</a>
					</div>
				</div>
				<div class="col-md-3">
					<div class="course">
						<img src="img/swift.jpg" class="img-responsive">
						<a href="#" class="">加入学习</a>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div>
	<div class="part-two" style="background-color: #fff;" id="yidongapp">
		<div class="container">
		<div class="row wow fadeInUp animated">
			<div class="col-md-6 img-mess">
				<h3>麦子学院移动APP下载</h3>
				<p>全新UI交互，与新网站数据同步，更加丰富的课程，开启精彩无限，语音搜索课程，喊出你想要的课程，一件收藏，方便自己重复学习，离线下载课程，在哪儿都能开！</p>
				<div class="mdpart2">
					<a href="#">
						<span class="glyphicon glyphicon-download-alt"></span>
						iPhone版
					</a>
					<a href="#">
						<span class="glyphicon glyphicon-download-alt"></span>
						Android版
					</a>
				</div>
			</div>
			<div class="col-md-6 img-bd">
				<a href="#">
					<img src="img/app-banner.jpg" class="img-responsive">
				</a>
			</div>
		</div>
		</div>
	</div>
	<div class="part-four" id="lianxiwomen">
	<div class="part-four-mask">
		<div class="container">
			<div class="row">
				<div class="col-md-6 mask-left wow fadeInLeft animated">
				<h2><span class="glyphicon glyphicon-send"></span>联系小麦</h2>
				<p>麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！</p>
				<p class="link-p"><span class="glyphicon glyphicon-home"></span>地址:成都市高新区天府软件园D5-11</p>
				<p class="link-p"><span class="glyphicon glyphicon-phone-alt"></span>联系电话：028-86567913</p>
				<p class="link-p"><span class="glyphicon glyphicon-envelope"></span> 邮箱:hr@maiziedu.com</p>
				</div>
				<div class="col-md-6 mask-right wow fadeInRight animated">
				<form>
				<div class="col-md-6">
					<div class="form-group">
  					  <input type="text" class="form-control" id="exampleInputEmail3" placeholder="您的姓名">
  					</div>
				</div>
				<div class="col-md-6">
					<div class="form-group">
  					  <input type="email" class="form-control" id="exampleInputPassword3" placeholder="您的邮箱">
  					</div>
				</div>
				<div class="col-md-12">
					<div class="form-group">
  					  <input type="text" class="form-control" id="exampleInputPassword3" placeholder="标题">
  					</div>
				</div>
				<div class="col-md-12">
					<textarea class="form-control" placeholder="留言内容" rows="4"></textarea>
				</div>
				<div class="col-md-8 btn-sub">
					<input type="submit" name="tejiao" class="form-control" value="提交">
				</div>
				</form>
				</div>
			</div>
		</div>
	</div>
	</div>
</section>
<!-- 主要内容部分 -->

<!-- 底部部分 -->
 <footer class="footpart">
 	<p class="text-center">Copyright © 2012-2015  www.maiziedu.com  蜀ICP备13014270号-4</p>
 </footer>
<!-- 底部部分 -->
<script src="lib/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="lib/jquery.singlePageNav.min.js"></script>
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
<script>
	$(function(){
		$("#ulnav").singlePageNav();

		$("#ulnav li").on("click",function(){

			if($("#btn-shousuo").css("display") != "none"){
				$("#btn-shousuo").trigger("click");
			}
		});

		new WOW().init();

	})
</script>
</body>
</html>